<template>
  <div>
    <h1>1.动态dynamic</h1>
    <button @click="isShow = true">账号密码填写</button>
    <button @click="isShow = false">个人信息填写</button>
    <p>下面显示注册组件</p>
    <user-name v-if="isShow">
      用户名:<input type="text" /> <br />
      密码:<input type="text" />
    </user-name>
    <user-info v-else>
      人生格言:<input type="text" /> <br />
      自我介绍: <textarea name="" id="" cols="30" rows="3"></textarea>
    </user-info>
  </div>
</template>

<script>
// 导入组件
import UserName from "../components/UserName.vue";
import UserInfo from "../components/UserInfo.vue";
export default {
  // 注册组件
  components: {
    UserName,
    UserInfo,
  },
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>